

<template>
  <div>
    <el-button size="default" type="primary" @click="addBtn">新增</el-button>
    <!-- 使用弹框   -->
    <SysDialog
        :title="dialog.title"
        :visible="dialog.visible"
        :width="dialog.width"
        :height="dialog.height"
        @onClose="onClose"
    >
        <!--   弹框内容，用插槽，就可以自定义      -->
        <template v-slot:content>
          <div>张三</div>
        </template>
    </SysDialog>
  </div>
</template>

<script setup lang="ts">

  // 直接使用封装的弹框对象
  import useDialog from '../../hooks/useDialog.ts'
  import SysDialog from "@/components/SysDialog.vue";

  // 获取弹框属性和方法
  const {dialog,onShow,onClose} = useDialog()

  const addBtn = () => {
    dialog.title = '新增'
    onShow()
  }

</script>

<!--<script setup lang="ts">-->
<!--  import SysDialog from "@/components/SysDialog.vue";-->
<!--  import {reactive} from "vue";-->

<!--  // 定义弹框的属性(响应式)-->
<!--  const dialog = reactive({-->
<!--    title:'新增',-->
<!--    visible:false,-->
<!--    width:630,-->
<!--    height:280-->
<!--  })-->

<!--  //-->
<!--  const addBtn = () => {-->
<!--    console.log('addBtn');-->
<!--    dialog.visible = true-->
<!--  }-->

<!--  //-->
<!--  const onClose = () => {-->
<!--    console.log('父onClose')-->
<!--    dialog.visible = false-->
<!--  }-->

<!--</script>-->

<style scoped lang="scss">

</style>